<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="950px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                label-width="138px"
                :rules="formRules"
                :inline="true"
            >
                <el-form-item label="案件类型" prop="caseType">
                    <el-checkbox-group
                        class="w-[800px]"
                        v-model="formData.caseType"
                        placeholder="请选择案件类型"
                    >
                        <el-checkbox label="专利" name="caseType"></el-checkbox>
                        <el-checkbox label="商标" name="caseType"></el-checkbox>
                        <el-checkbox label="版权" name="caseType"></el-checkbox>
                        <el-checkbox label="科技服务" name="caseType"></el-checkbox>
                        <el-checkbox label="法律服务" name="caseType"></el-checkbox>
                        <el-checkbox label="调查案" name="caseType"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="申请人类型" prop="applicantType">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.applicantType"
                        placeholder="请选择申请人类型"
                    >
                        <el-option label="大专院校" value="1" />
                        <el-option label="科研单位" value="2" />
                        <el-option label="事业单位" value="3" />
                        <el-option label="工矿企业" value="4" />
                        <el-option label="个人" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item label="实体类型" prop="entityType">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.entityType"
                        placeholder="请选择实体类型"
                    >
                        <el-option label="大实体" value="1" />
                        <el-option label="小实体" value="2" />
                        <el-option label="微实体" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="名称(中文)" prop="customerNameChinese">
                    <el-input
                        class="w-[130px]"
                        v-model="formData.customerNameChinese"
                        placeholder="请输入名称(中文)"
                    />
                    <el-button type="primary" style="margin-left: 20px"> 输入圆点 </el-button>
                </el-form-item>
                <el-form-item prop="isFirstContact">
                    <el-checkbox-group v-model="formData.isFirstContact">
                        <el-checkbox label="是否第一联系人" name="isFirstContact"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item prop="isReceiptTitle">
                    <el-checkbox-group v-model="formData.isReceiptTitle">
                        <el-checkbox label="作为收据抬头" name="isReceiptTitle"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item prop="changeRecordId">
                    <el-button type="primary" class="w-[120px]"> 客户变更历史记录 </el-button>
                </el-form-item>

                <!-- <el-form-item label="客户变更历史记录" prop="changeRecordId">
            <el-input
              class="w-[200px]"
              v-model="formData.changeRecordId"
              placeholder="请输入客户变更历史记录"
            />
          </el-form-item> -->
                <!-- <el-form-item label="案件类型编号" prop="caseTypeId">
            <el-input
              class="w-[200px]"
              v-model="formData.caseTypeId"
              placeholder="请输入案件类型编号"
            />
          </el-form-item> -->
                <el-form-item label="缴费人收据抬头" prop="payTheFeesTitle">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.payTheFeesTitle"
                        placeholder="请输入缴费人收据抬头"
                    />
                </el-form-item>
                <el-form-item label="缴费人统一社会信用代码" prop="socialCreditCode">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.socialCreditCode"
                        placeholder="请输入缴费人统一社会信用代码"
                    />
                </el-form-item>
                <!--

          <el-form-item label="缴费人收据抬头" prop="payTheFeesTitle">
            <el-input
              class="w-[200px]"
              v-model="formData.payTheFeesTitle"
              placeholder="请输入缴费人收据抬头"
            />
          </el-form-item> -->

                <el-form-item label="名称(英文)" prop="customerNameEnglish">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.customerNameEnglish"
                        placeholder="请输入名称(英文)"
                    />
                </el-form-item>
                <el-form-item label="申请人编号" prop="applicantId">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.applicantId"
                        placeholder="请输入申请人编号"
                    />
                </el-form-item>
                <el-form-item label="名称/姓(中文)" prop="surnameChinese">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.surnameChinese"
                        placeholder="请输入名称/姓(中文)"
                    />
                </el-form-item>
                <el-form-item label="名(中文)" prop="nameChinese">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.nameChinese"
                        placeholder="请输入名(中文)"
                    />
                </el-form-item>
                <el-form-item label="是否默认申请人" prop="isDefaultApplicant">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.isDefaultApplicant"
                        placeholder="请选择是否默认申请人"
                    >
                        <el-option label="是" value="1" />
                        <el-option label="否" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="名称(其他)" prop="customerNameElse">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.customerNameElse"
                        placeholder="请输入名称(其他)"
                    />
                </el-form-item>
                <el-form-item label="名称/姓(英文)" prop="surnameEnglish">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.surnameEnglish"
                        placeholder="请输入名称/姓(英文)"
                    />
                </el-form-item>
                <el-form-item label="名(英文)" prop="nameEnglish">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.nameEnglish"
                        placeholder="请输入名(英文)"
                    />
                </el-form-item>
                <!-- <el-form-item label="申请人" prop="applicant">
            <el-input
              class="w-[200px]"
              v-model="formData.applicant"
              placeholder="请输入申请人"
            />
          </el-form-item> -->

                <el-form-item label="经常居所地或营业所所在地" prop="habitualResidence">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.habitualResidence"
                        placeholder="请输入经常居所地或营业所所在地"
                    />
                </el-form-item>
                <el-form-item label="省份" prop="province">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.province"
                        placeholder="请输入省份"
                    >
                        <el-option label="北京(Beijing)" value="1" />
                        <el-option label="上海(Shanghai)" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="城市(中文)" prop="cityChinese">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.cityChinese"
                        placeholder="请输入城市(中文)"
                    >
                        <el-option label="广州市" value="1" />
                        <el-option label="深圳市" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="行政区划" prop="administrativeDivision">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.administrativeDivision"
                        placeholder="请输入行政区划"
                    />
                </el-form-item>
                <el-form-item label="邮编" prop="postcode">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.postcode"
                        placeholder="请输入邮编"
                    />
                </el-form-item>
                <el-form-item label="申请人名义缴纳官费" prop="applicantOfficialFee">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.applicantOfficialFee"
                        placeholder="请选择申请人名义缴纳官费"
                    >
                        <el-option label="是" value="1" />
                        <el-option label="否" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="城市(英文)" prop="cityEnglish">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.cityEnglish"
                        placeholder="请输入城市(英文)"
                    />
                </el-form-item>
                <el-form-item label="电子申请用户代码" prop="electronicSubscriber">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.electronicSubscriber"
                        placeholder="请输入电子申请用户代码"
                    />
                </el-form-item>
                <el-form-item label="街道地址(中文)" prop="streetChinese">
                    <el-input
                        class="w-[620px]"
                        v-model="formData.streetChinese"
                        placeholder="请输入街道地址(中文)"
                    />
                    <el-button type="primary" style="margin-left: 20px"> 历史地址 </el-button>
                </el-form-item>
                <!-- <el-form-item label="历史地址" prop="historicalAddressId">
            <el-input
              class="w-[200px]"
              v-model="formData.historicalAddressId"
              placeholder="请输入历史地址"
            />
          </el-form-item> -->
                <el-form-item label="街道地址(英文)" prop="streetEnglish">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.streetEnglish"
                        placeholder="请输入街道地址(英文)"
                    />
                </el-form-item>
                <el-form-item label="部门/楼层(中文)" prop="departmentChinese">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.departmentChinese"
                        placeholder="请输入部门/楼层(中文)"
                    />
                </el-form-item>
                <el-form-item label="部门/楼层(英文)" prop="departmentEnglish">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.departmentEnglish"
                        placeholder="请输入部门/楼层(英文)"
                    />
                </el-form-item>
                <!-- <el-form-item label="证件类型编号" prop="certificateTypeId">
            <el-input
              class="w-[200px]"
              v-model="formData.certificateTypeId"
              placeholder="请输入证件类型编号"
            />
          </el-form-item> -->
                <el-form-item label="证件类型" prop="certificateType">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.certificateType"
                        placeholder="请选择证件类型"
                    >
                        <el-option label="居民身份证" value="1" />
                        <el-option label="其他证件" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号" prop="idNumber">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.idNumber"
                        placeholder="请输入证件号"
                    />
                </el-form-item>
                <el-form-item label="费减备案" prop="feeReductionFiling">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.feeReductionFiling"
                        placeholder="请选择费减备案"
                    >
                        <el-option label="是" value="1" />
                        <el-option label="否" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="费减备案有效日期" prop="time">
                    <daterange-picker
                        class="w-[685px]"
                        v-model:startTime="formData.reductionCreateTim"
                        v-model:endTime="formData.reductionEndTime"
                    />
                    <el-button type="primary" style="margin-left: 20px"> 获取费减 </el-button>
                </el-form-item>
                <!-- <el-form-item label="费减备案开始日期" prop="reductionCreateTime">
            <el-date-picker
              class="flex-1 !flex w-[285px]"
              v-model="formData.reductionCreateTime"

              type="datetime"
              clearable
              value-format="YYYY-MM-DD hh:mm:ss"
              placeholder="开始日期"
            />
          </el-form-item>
          <el-form-item label="费减备案结束日期" prop="reductionEndTime">
            <el-date-picker
              class="flex-1 !flex w-[285px]"
              v-model="formData.reductionEndTime"
              type="datetime"
              clearable
              value-format="YYYY-MM-DD hh:mm:ss"
              placeholder="结束日期"
            />
          </el-form-item> -->
                <el-form-item label="中国总委托书编号" prop="powerOfAttorneyid">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.powerOfAttorneyid"
                        placeholder="请输入中国总委托书编号"
                    />
                </el-form-item>
                <el-form-item label="备案证件号" prop="recordCertificateNumber">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.recordCertificateNumber"
                        placeholder="请输入备案证件号"
                    />
                </el-form-item>
                <el-form-item label="PCT总委托书编号" prop="pctPowerOfAttorneyid">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.pctPowerOfAttorneyid"
                        placeholder="请输入PCT总委托书编号"
                    />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.contacts"
                        placeholder="请输入联系人"
                    />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input class="w-[150px]" v-model="formData.phone" placeholder="请输入电话" />

                    <el-checkbox-group v-model="formData.qq" style="margin-left: 20px">
                        <el-checkbox label="请求书中显示" name="qq"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="传真" prop="fax">
                    <el-input class="w-[285px]" v-model="formData.fax" placeholder="请输入传真" />
                </el-form-item>
                <el-form-item label="邮件" prop="email">
                    <el-input class="w-[285px]" v-model="formData.email" placeholder="请输入邮件" />
                </el-form-item>
                <el-form-item label="国家(地区)" prop="nation">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.nation"
                        placeholder="请输入国家(地区)"
                    />
                </el-form-item>
                <el-form-item label="是否监控年费" prop="isAnnualMonitoringFee">
                    <el-select
                        class="flex-1 w-[130px]"
                        v-model="formData.isAnnualMonitoringFee"
                        placeholder="是否监控"
                    >
                        <el-option label="是" value="1" />
                        <el-option label="否" value="2" />
                    </el-select>
                    <el-select
                        class="flex-1 w-[155px]"
                        v-model="formData.annualMonitoringFee"
                        placeholder="监控年费"
                    >
                        <el-option label="下一年" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="国籍(地区)" prop="nationality">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.nationality"
                        placeholder="请输入国籍(地区)"
                    />
                </el-form-item>
                <el-form-item label="营业执照" prop="businessLicense">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.businessLicense"
                        placeholder="请输入营业执照"
                    />
                </el-form-item>
                <el-form-item label="费减证明文件名" prop="reductionFilename">
                    <!-- <el-input
              class="w-[200px]"
              v-model="formData.reductionFilename"
              placeholder="请输入费减证明文件名"
            /> -->
                    <div class="w-[285px]">
                        <el-button type="primary"> 添加 </el-button>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="费减证明文件路径" prop="reductionPath">
            <el-input
              class="w-[200px]"
              v-model="formData.reductionPath"
              placeholder="请输入费减证明文件路径"
            />
          </el-form-item> -->
                <el-form-item label="总委托书文件名" prop="powerOfAttorneyFilename">
                    <!-- <el-input
              class="w-[200px]"
              v-model="formData.powerOfAttorneyFilename"
              placeholder="请输入总委托书文件名"
            /> -->
                    <div class="w-[285px]">
                        <el-button type="primary"> 添加 </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        class="w-[740px]"
                        v-model="formData.remark"
                        placeholder="请输入备注"
                    />
                </el-form-item>
                <el-form-item label="申请人要求" prop="applicantRequestId">
                    <div class="fj-table">
                        <el-button type="primary"> 新增 </el-button>
                        <el-table class="mt-4" size="large">
                            <el-table-column type="selection" width="50" />
                            <el-table-column label="序号" prop="id" min-width="80" />
                            <el-table-column label="申请人要求" prop="phone" min-width="160" />
                            <el-table-column label="最后更新人" prop="email" min-width="160" />
                            <el-table-column label="最后更新时间" prop="email" min-width="160" />
                            <el-table-column label="操作" width="120" fixed="right">
                                <el-button type="primary"> 保存 </el-button>
                                <el-button type="primary"> 取消 </el-button>
                                <el-button type="primary"> 向上 </el-button>
                                <el-button type="primary"> 向下 </el-button>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- <el-input
              class="w-[740px]"
              v-model="formData.applicantRequestId"
              placeholder="请输入申请人要求id"
            /> -->
                </el-form-item>
                <el-form-item label="附件" prop="applicantRequestId">
                    <div class="fj-table">
                        <el-button type="primary"> 上传附件 </el-button>
                        <el-table class="mt-4" size="large">
                            <el-table-column type="selection" width="50" />
                            <el-table-column label="序号" prop="id" min-width="80" />
                            <el-table-column label="附件名称" prop="phone" min-width="160" />
                            <el-table-column label="文件描述" prop="email" min-width="160" />
                            <el-table-column label="上传时间" prop="email" min-width="160" />
                            <el-table-column label="上传人员 " prop="email" min-width="160" />
                            <el-table-column label="操作" width="120" fixed="right">
                                <el-button type="primary"> 删除 </el-button>
                                <el-button type="primary"> 取消 </el-button>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- <el-input
              class="w-[740px]"
              v-model="formData.applicantRequestId"
              placeholder="请输入申请人要求id"
            /> -->
                </el-form-item>
                <!-- <el-form-item label="附件" prop="applicantFileId">
            <el-input
              class="w-[740px]"
              v-model="formData.applicantFileId"
              placeholder="请输入附件id"
            />
          </el-form-item> -->
                <div>
                    <el-form-item class="w-[740px]" label="CPC递交联系人--" prop="cpcName">
                    </el-form-item>
                    <el-form-item label="姓名" prop="cpcName">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.cpcName"
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item label="电话" label-width="160px" prop="cpcPhone">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.cpcPhone"
                            placeholder="请输入电话"
                        />
                    </el-form-item>
                    <el-form-item label="邮政编码" prop="cpcPostcode">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.cpcPostcode"
                            placeholder="请输入邮政编码"
                        />
                    </el-form-item>
                    <el-form-item label="电子邮箱" label-width="160px" prop="cpcEmail">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.cpcEmail"
                            placeholder="请输入电子邮箱"
                        />
                    </el-form-item>
                    <el-form-item label="国家(地区)" prop="cpcNation">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.cpcNation"
                            placeholder="请输入国家(地区)"
                        />
                    </el-form-item>
                    <el-form-item label="省/自治区/直辖市" label-width="160px" prop="cpcProvince">
                        <el-select
                            class="flex-1 w-[270px]"
                            v-model="formData.cpcProvince"
                            placeholder="请选择省/自治区/直辖市"
                        >
                            <el-option label="北京(Beijing)" value="1" />
                            <el-option label="上海(Shanghai)" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市县" prop="cpcTown">
                        <el-select
                            class="flex-1 w-[265px]"
                            v-model="formData.cpcTown"
                            placeholder="请选择市县"
                        >
                            <el-option label="请选择" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城区(乡)/街道/门牌号" label-width="160px" prop="cpcCity">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.cpcCity"
                            placeholder="请输入城区(乡)/街道/门牌号"
                        />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item class="w-[740px]" label="递交联系人--" prop="cpcName">
                    </el-form-item>
                    <el-form-item label="类型" prop="cepctType">
                        <el-radio-group
                            class="w-[740px]"
                            v-model="formData.cepctType"
                            placeholder="请选择类型"
                        >
                            <el-radio label="0">法人</el-radio>
                            <el-radio label="1">自然人</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="名(中文)" prop="cepctNameChinese">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctNameChinese"
                            placeholder="请输入名(中文)"
                        />
                    </el-form-item>
                    <el-form-item label="名称/姓(中文)" prop="cepctSurnameChinese">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctSurnameChinese"
                            placeholder="请输入名称/姓(中文)"
                        />
                    </el-form-item>
                    <el-form-item label="名(英文)" prop="cepctNameEnglish">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctNameEnglish"
                            placeholder="请输入名(英文)"
                        />
                    </el-form-item>
                    <el-form-item label="名称/姓(英文)" prop="cepctSurnameEnglish">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctSurnameEnglish"
                            placeholder="请输入名称/姓(英文)"
                        />
                    </el-form-item>
                    <el-form-item label="国家(地址)" prop="cepctNation">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctNation"
                            placeholder="请输入国家(地址)"
                        />
                    </el-form-item>
                    <el-form-item label="省份" prop="cepctNationalProvince">
                        <el-select
                            class="flex-1 w-[285px]"
                            v-model="formData.cepctNationalProvince"
                            placeholder="请选择国家省份"
                        >
                            <el-option label="请选择" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市(中文)" prop="cepctCityChinese">
                        <el-select
                            class="flex-1 w-[285px]"
                            v-model="formData.cepctCityChinese"
                            placeholder="请选择城市(中文)"
                        >
                            <el-option label="请选择" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市(英文)" prop="cepctCityEnglish">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctCityEnglish"
                            placeholder="请输入城市(英文)"
                        />
                    </el-form-item>
                    <el-form-item label="街道地址(中文)" prop="cepctStreetChinese">
                        <el-input
                            class="w-[740px]"
                            v-model="formData.cepctStreetChinese"
                            placeholder="请输入街道地址(中文)"
                        />
                    </el-form-item>
                    <el-form-item label="街道地址(英文)" prop="cepctStreetEnglish">
                        <el-input
                            class="w-[740px]"
                            v-model="formData.cepctStreetEnglish"
                            placeholder="请输入街道地址(英文)"
                        />
                    </el-form-item>
                    <el-form-item label="电话" prop="cepctPhone">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctPhone"
                            placeholder="请输入电话"
                        />
                    </el-form-item>
                    <el-form-item label="邮编" prop="cepctPostcode">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctPostcode"
                            placeholder="请输入邮编"
                        />
                    </el-form-item>
                    <el-form-item label="传真" prop="cepctFax">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctFax"
                            placeholder="请输入传真"
                        />
                    </el-form-item>
                    <el-form-item label="邮件" prop="cepctEmail">
                        <el-input
                            class="w-[285px]"
                            v-model="formData.cepctEmail"
                            placeholder="请输入邮件"
                        />
                    </el-form-item>
                    <div style="margin-left: 40px">
                        <div>
                            授权PCT主管位置，如果其愿意，使用本电子邮件发送有关本国国际申请过的通知书：
                        </div>
                        <el-form-item>
                            <el-radio-group class="w-[740px]" v-model="formData.tzs">
                                <el-radio label="0">作为随后纸件通知书的预送本</el-radio>
                                <el-radio label="1"
                                    >仅使用电子形式(随后交不邮寄的纸件通知书)</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <el-form-item class="w-[740px]" label="POA签名人--" prop="cpcName">
                    </el-form-item>
                    <el-form-item label="Name" prop="poaName">
                        <el-input
                            class="w-[740px]"
                            v-model="formData.poaName"
                            placeholder="请输入名称"
                        />
                    </el-form-item>
                    <el-form-item label="Title" prop="poaTitle">
                        <el-input
                            class="w-[740px]"
                            v-model="formData.poaTitle"
                            placeholder="请输入标题"
                        />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item class="w-[740px]" label="Hague递交联系人--" prop="cpcName">
                    </el-form-item>
                    <el-form-item label="姓名" prop="hagueName">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.hagueName"
                            placeholder="请输入姓名"
                        />
                    </el-form-item>
                    <el-form-item label="电话" label-width="160px" prop="haguePhone">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.haguePhone"
                            placeholder="请输入电话"
                        />
                    </el-form-item>
                    <el-form-item label="邮政编码" prop="haguePostcode">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.haguePostcode"
                            placeholder="请输入邮政编码"
                        />
                    </el-form-item>
                    <el-form-item label="电子邮箱" label-width="160px" prop="hagueEmail">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.hagueEmail"
                            placeholder="请输入电子邮箱"
                        />
                    </el-form-item>
                    <el-form-item label="国家(地区)" prop="hagueNation">
                        <el-input
                            class="w-[265px]"
                            v-model="formData.hagueNation"
                            placeholder="请输入国家(地区)"
                        />
                    </el-form-item>
                    <el-form-item label="省/自治区/直辖市" label-width="160px" prop="hagueProvince">
                        <el-select
                            class="flex-1 w-[270px]"
                            v-model="formData.hagueProvince"
                            placeholder="请选择省/自治区/直辖市"
                        >
                            <el-option label="请选择" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市县" prop="hagueTown">
                        <el-select
                            class="flex-1 w-[265px]"
                            v-model="formData.hagueTown"
                            placeholder="请选择市县"
                        >
                            <el-option label="请选择" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城区(乡)/街道/门牌号" label-width="160px" prop="hagueCity">
                        <el-input
                            class="w-[270px]"
                            v-model="formData.hagueCity"
                            placeholder="请输入城区(乡)/街道/门牌号"
                        />
                    </el-form-item>
                </div>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { applicantEdit, applicantAdd, applicantDetail } from '@/api/applicant'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑申请人列' : '新增申请人列'
})

const formData = reactive({
    id: '',
    customerId: '',
    customerName: '',
    changeRecordId: '',
    caseTypeId: '',
    caseType: [],
    applicantTypeId: '',
    applicantType: '',
    entityTypeId: '',
    entityType: '',
    customerNameChinese: '',
    customerNameElse: '',
    isFirstContact: [],
    isReceiptTitle: [],
    payTheFeesTitle: '',
    socialCreditCode: '',
    customerNameEnglish: '',
    applicantId: '',
    applicant: '',
    surnameChinese: '',
    nameChinese: '',
    surnameEnglish: '',
    nameEnglish: '',
    isDefaultApplicant: '',
    habitualResidence: '',
    province: '',
    cityChinese: '',
    administrativeDivision: '',
    postcode: '',
    applicantOfficialFee: '',
    cityEnglish: '',
    electronicSubscriber: '',
    streetChinese: '',
    historicalAddressId: '',
    streetEnglish: '',
    departmentChinese: '',
    departmentEnglish: '',
    certificateTypeId: '',
    certificateType: '',
    idNumber: '',
    feeReductionFiling: '',
    reductionCreateTime: '',
    reductionEndTime: '',
    powerOfAttorneyid: '',
    recordCertificateNumber: '',
    pctPowerOfAttorneyid: '',
    contacts: '',
    phone: '',
    fax: '',
    email: '',
    nation: '',
    isAnnualMonitoringFee: '',
    annualMonitoringFee: '',
    nationality: '',
    businessLicense: '',
    reductionFilename: '',
    reductionPath: '',
    powerOfAttorneyFilename: '',
    powerOfAttorneyPath: '',
    remark: '',
    applicantRequestId: '',
    applicantFileId: '',
    cpcName: '',
    cpcPhone: '',
    cpcPostcode: '',
    cpcEmail: '',
    cpcNation: '',
    cpcProvince: '',
    cpcTown: '',
    cpcCity: '',
    cepctType: '',
    cepctNameChinese: '',
    cepctSurnameChinese: '',
    cepctNameEnglish: '',
    cepctSurnameEnglish: '',
    cepctNation: '',
    cepctNationalProvince: '',
    cepctCityChinese: '',
    cepctCityEnglish: '',
    cepctStreetChinese: '',
    cepctStreetEnglish: '',
    cepctPhone: '',
    cepctPostcode: '',
    cepctFax: '',
    cepctEmail: '',
    poaName: '',
    poaTitle: '',
    hagueName: '',
    haguePhone: '',
    haguePostcode: '',
    hagueEmail: '',
    hagueNation: '',
    hagueProvince: '',
    hagueTown: '',
    hagueCity: '',
    tzs: '',
    qq: '',
    reductionCreateTim: ''
})

const formRules = {
    applicantType: [
        {
            required: true,
            message: '请选择申请人类型',
            trigger: ['blur']
        }
    ],
    customerNameChinese: [
        {
            required: true,
            message: '请输入名称(中文)',
            trigger: ['blur']
        }
    ],
    habitualResidence: [
        {
            required: true,
            message: '请输入经常居所地或营业所所在地',
            trigger: ['blur']
        }
    ],
    province: [
        {
            required: true,
            message: '请输入省份id',
            trigger: ['blur']
        }
    ],
    cityChinese: [
        {
            required: true,
            message: '请输入城市(中文)id',
            trigger: ['blur']
        }
    ],
    postcode: [
        {
            required: true,
            message: '请输入邮编',
            trigger: ['blur']
        }
    ],
    streetChinese: [
        {
            required: true,
            message: '请输入街道地址(中文)',
            trigger: ['blur']
        }
    ],
    certificateType: [
        {
            required: true,
            message: '请选择证件类型',
            trigger: ['blur']
        }
    ],
    idNumber: [
        {
            required: true,
            message: '请输入证件号',
            trigger: ['blur']
        }
    ],
    nation: [
        {
            required: true,
            message: '请输入国家(地区)',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...formData }
    data.caseType = data.caseType.join(',')
    data.isFirstContact = data.isFirstContact.join(',')
    data.isReceiptTitle = data.isReceiptTitle.join(',')
    mode.value == 'edit' ? await applicantEdit(data) : await applicantAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
            //@ts-ignore
            formData.caseType = String(data.caseType).split(',')
            //@ts-ignore
            formData.isFirstContact = String(data.isFirstContact).split(',')
            //@ts-ignore
            formData.isReceiptTitle = String(data.isReceiptTitle).split(',')
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await applicantDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>

<style scoped>
.fj-table {
    width: 740px;
}
</style>
